export interface MenuItem {
  name: string;
  href: string;
  active: boolean;
}
export interface NavBarProps {
  items: MenuItem[];
}
// 以移动平台显示为第一优先级
export const NavBar = ({ items }: NavBarProps) => {
  return (
    <div class="group">
      {/* 窄屏触发展开菜单按钮 */}
      <button
        type="button"
        class="inline-flex xl:hidden items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg   hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
        aria-controls="navbar-default"
        aria-expanded="false"
      >
        <span class="sr-only">打开主菜单</span>
        <svg
          class="w-5 h-5"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 17 14"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M1 1h15M1 7h15M1 13h15"
          />
        </svg>
      </button>

      {/* 菜单导航区域 */}
      <div
        class="hidden w-full absolute left-0 right-0  md:w-auto z-10 group-focus-within:block xl:block xl:static"
        id="navbar-default"
      >
        <ul class="font-medium flex flex-col p-4 xl:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 xl:flex-row xl:space-x-8 rtl:space-x-reverse xl:mt-0 xl:border-0 xl:bg-white dark:bg-gray-800 xl:dark:bg-gray-900 dark:border-gray-700">
          {items.map((item, index) => {
            return (
              <li key={index}>
                <a
                  href={item.href}
                  class={`block py-2 px-3 rounded xl:bg-transparent  xl:p-0 active:text-blue-700 active:bg-blue-500 xl:active:text-blue-700 xl:active:bg-inherit  xl:hover:text-blue-600 ${
                    item.active
                      ? "bg-blue-700 text-white xl:text-blue-500"
                      : "text-gray-900 dark:text-white"
                  }`}
                >
                  <span>{item.name}</span>
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};
